import services from '../../services/api';

import { APIUrl } from '../../services/createServices';
const initialState = {
  skin_color: '#262626',
  font_color: '#888888',
  primary_color: '#006eff',
  s_logo: '',
  b_logo: '',
  s_logo_url: '',
  b_logo_url: '',
  skin_preview: {
    skin_color: '#262626',
    font_color: '#888888',
    primary_color: '#006eff',
    s_logo: '',
    b_logo: '',
  },
};
export default {
  name: 'skin',
  state: initialState,
  reducers: {
    updateColor: (state, { data }) => {
      return {
        ...state,
        ...data,
      };
    },
    updateLogo: (state, { data }) => {
      return {
        ...state,
        ...data,
      };
    },
    updateSkinColor: (state, { data }) => {
      console.log(data);
      return {
        ...state,
        skin_color: data,
      };
    },
    updateFontColor: (state, { data }) => {
      return {
        ...state,
        font_color: data,
      };
    },
    updatePrimaryColor: (state, { data }) => {
      return {
        ...state,
        primary_color: data,
      };
    },
    updateSLogo: (state, { data }) => {
      return {
        ...state,
        s_logo: data,
        s_logo_url: data.s_logo ? `${APIUrl}/file/view?file_id=${data.s_logo}` : data.s_logo,
      };
    },
    updateBlogo: (state, { data }) => {
      return {
        ...state,
        b_logo: data,
        b_logo_url: data.b_logo ? `${APIUrl}/file/view?file_id=${data.b_logo}` : data.b_logo,
      };
    },
    updatePreview: (state, { data }) => {
      return {
        ...state,
        skin_preview: { ...state.skin_preview, ...data },
      };
    },
  },
  effects: {
    querySkinInfo: async ({ params }, { dispatch }) => {
      return new Promise((resolve, reject) => {
        services.skin.getInfo({}).then((res) => {
          if (res.code === 0) {
            try {
              if (res.data) {
                const data = JSON.parse(res.data);
                dispatch({
                  type: 'skin/updateColor',
                  data: { skin_color: data.skin_color, font_color: data.font_color, primary_color: data.primary_color },
                });
                dispatch({
                  type: 'skin/updateLogo',
                  data: {
                    b_logo: data.b_logo,
                    s_logo: data.s_logo,
                    s_logo_url: data.s_logo ? `${APIUrl}/file/view?file_id=${data.s_logo}` : data.s_logo,
                    b_logo_url: data.b_logo ? `${APIUrl}/file/view?file_id=${data.b_logo}` : data.b_logo,
                  },
                });
              } else {
                dispatch({
                  type: 'skin/updateColor',
                  data: {
                    skin_color: initialState.skin_color,
                    font_color: initialState.font_color,
                    primary_color: initialState.primary_color,
                  },
                });
                dispatch({
                  type: 'skin/updateLogo',
                  data: {
                    b_logo: '',
                    s_logo: '',
                    s_logo_url: '',
                    b_logo_url: '',
                  },
                });
              }
              resolve();
            } catch (err) {
              console.log(err);
              reject(err);
            }
          }
        });
      });
    },
  },
};
